<template>
<div v-if="axiosOK" class="myLPdiv">
<div class="bigpicturediv" >
    <div class="bigpicturedivleft">
        <el-button @click="btnleft" class="btnleft" icon="el-icon-caret-left">
            </el-button></div>
    <div class="bigpicturedivcenter">
    <img v-if="BigpictureShow == 0" :src="imglist[0]" class="bigpicture">
    <img v-if="BigpictureShow == 1" :src="imglist[1]" class="bigpicture">
    <img v-if="BigpictureShow == 2" :src="imglist[2]" class="bigpicture">
    <img v-if="BigpictureShow == 3" :src="imglist[3]" class="bigpicture">
    <img v-if="BigpictureShow == 4" :src="imglist[4]" class="bigpicture">
    </div>
    <div class="bigpicturedivright">
        <el-button @click="btnright" class="btnright" icon="el-icon-caret-right">
            </el-button></div>
</div>
<div class="smallpicturediv">
    <div class="smallpicturedivfirst">
        <img :src="imglist[5]" class="smallpicture" @click="smallpicturefirst">
    </div>
    <div class="smallpicturedivsecond">
        <img :src="imglist[6]" class="smallpicture" @click="smallpicturesecond">
    </div>
    <div class="smallpicturedivthird">
        <img :src="imglist[7]" class="smallpicture" @click="smallpicturethird">
    </div>
    <div class="smallpicturedivfourth">
        <img :src="imglist[8]" class="smallpicture" @click="smallpicturefourth">
    </div>
    <div class="smallpicturedivfifth">
        <img :src="imglist[9]" class="smallpicture" @click="smallpicturefifth">
    </div>
</div>
</div>
</template>

<script>

import axios from 'axios'
    export default {
    name:'XiaoLeftPictureShow',
	data(){
		return{
			axiosOK:'',
            axiosData:'',
			imglist:[],
			BigpictureShow:2,
			axiosIDdate:100000424,
			// axiosIDdate:100000424,
		}
	},
	mounted(){
		document.body.scrollTop=0
		if(sessionStorage.getItem('axiosIDdate') !=null){  //如果sessionStorage里的数据存在时
			if(this.$route.params.id != null) {   //如果路由有传来数据(到达订单详情页面),此时是没有关闭已经存在的的订单详情页面而进行的路由跳转
				if(this.$route.params.id != sessionStorage.getItem('axiosIDdate')){
				this.axiosIDdate=this.$route.params.id
				sessionStorage.setItem('axiosIDdate',JSON.stringify(this.axiosIDdate))
				}else{
					this.axiosIDdate=JSON.parse(sessionStorage.getItem('axiosIDdate'))
				}
			}
			else{
				//如果路由没有传数据(路由没有跳转)      此时解释为刷新页面
				this.axiosIDdate=JSON.parse(sessionStorage.getItem('axiosIDdate'))
			}
		}else{	    //如果sessionStorage里没有数据(即路由有跳转)    此时解释为初次进入订单详情界面
			this.axiosIDdate=this.$route.params.id
			sessionStorage.setItem('axiosIDdate',JSON.stringify(this.axiosIDdate))
		}

		this.$addr.get(`products/${this.axiosIDdate}/details`).then(
            response=>{
                console.log('请求获取商品详情成功了',response)
                this.axiosOK=1
                this.axiosData=response.data.data
                for( let i=0; i<10; i++){
					switch (i) {
			case 0:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}1_big.jpg`)
				break;
			case 1:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}2_big.jpg`)
				break;
			case 2:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}3_big.jpg`)
				break;
			case 3:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}4_big.jpg`)
				break;
			case 4:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}5_big.jpg`)
				break;
			case 5:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}1.jpg`)
				break;
			case 6:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}2.jpg`)
				break;
			case 7:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}3.jpg`)
				break;
			case 8:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}4.jpg`)
				break;
			case 9:this.imglist[i]=require(`../../assets/${response.data.data.image.slice(13)}5.jpg`)
				break;
						default:
							break;
					}
                }
            },
            error=>{
                console.log('请求获取商品详情失败了',error.message)
            }
        )
        setTimeout(() => {
            this.$bus.$emit('LefttoRight',this.axiosData,this.axiosOK)
        }, 400);
		console.log(this.axiosIDdate,'###%%');
    },
	beforeDestroy(){
		this.$bus.$off('axiosIDdate')
	},
	methods:{
		smallpicturefirst(){
			this.BigpictureShow=0
		},
		smallpicturesecond(){
			this.BigpictureShow=1
		},
		smallpicturethird(){
			this.BigpictureShow=2
		},
		smallpicturefourth(){
			this.BigpictureShow=3
		},
		smallpicturefifth(){
			this.BigpictureShow=4
		},
		btnleft(){
			if(this.BigpictureShow > 0){
				this.BigpictureShow=this.BigpictureShow-1
			}else{
                this.BigpictureShow=4
            }
		},
		btnright(){
			if(this.BigpictureShow < 4){
				this.BigpictureShow=this.BigpictureShow+1
			}else{
                this.BigpictureShow=0
            }
		},
	},
    }
</script>

<style scoped>
.myLPdiv{
	float: right;
	max-width: 540px;
}
.bigpicturediv {
	padding-top: 60px;
	display: flex;
}
.bigpicturediv :hover{
    cursor: pointer;
}
.bigpicturedivcenter{
	width: 100%;
	margin-left: 10px;
	margin-right: 0px;
}
.bigpicture{
	/* padding-top: 40px;
	margin: auto; */
    height: 280px;
    width: 95%;
	border: 2px solid rgb(75, 75, 75);
}
.bigpicturedivleft{
	width: 60px;
	margin-top: 125px;
	padding-left: 30px;
}
.bigpicturedivleft :hover{
	background-color: transparent;
}
.btnleft{
	background-color: transparent;
	border: 0;
	width: 5px;
}
.bigpicturedivright{
	width: 60px;
	margin-top: 125px;
	padding-right: 30px;
}
.bigpicturedivright :hover{
	background-color: transparent;
}
.btnright{
	border: 0;
	background-color: transparent;
	width: 5px;
}
.smallpicture{
    border: 1px solid rgb(75, 75, 75);
    height: 70px;
    width: 16%;
}
.smallpicturediv {
	padding-top: 5px;
}
.smallpicturediv :hover{
    cursor: pointer;
}
.smallpicturedivfirst{
	display: inline;
	padding-top: -2px;
}
.smallpicturedivsecond{
	padding-left: 2px;
	display: inline;
}
.smallpicturedivthird{
	padding-left: 2px;
	display: inline;
}
.smallpicturedivfourth{
	padding-left: 2px;
	display: inline;
}
.smallpicturedivfifth{
	padding-left: 2px;
	display: inline;
}
</style>